<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-08 16:07:07
 * @LastEditTime : 2022-10-09 12:04:03
 * @FilePath     : \src\App.vue
-->
<script setup lang="ts">
import { customRef } from 'vue'

const myRef = (value: any) => {
  let timer: any
  return customRef((track, trigger) => {
    return {
      get(){
        track(); // 告诉Vue这个数据是需要追踪变化的
        console.log('get', value);
        return value;
      },
      set(newValue){
        clearTimeout(timer)
        timer = setTimeout(() => {
          console.log('set', newValue);
          // 调接口 做防抖
          value = newValue;
          trigger();  // 告诉Vue触发界面更新
        }, 500)
      }
    }
  })
}

const age = myRef(18)
const change = () => {(age.value as number) += 1;}  //需.value访问
</script>

<template>
  <h3>customRef</h3>
  <h5>
    作用：创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。
  </h5>
  <h5>
    注意：<br>
    1、不能在get方法中发送网络请求
  </h5>
  <ul>
    <li>age：{{ age}}</li>
  </ul>
  <button @click="change">修改</button>
</template>

<style scoped>
ul,li{
  list-style: none;
}
</style>
